<template>
    <div>
        <div style="margin-bottom: 20px;">
            <el-select filterable v-model="query.chongwuId" placeholder="请选择宠物" style="margin-right: 20px;" clearable>
                <el-option :label="v.name" :value="v.id" v-for="v in cwList"></el-option>
            </el-select>
            <el-select v-model="query.status" placeholder="请选择状态"  style="margin-right: 20px;" clearable>
                <el-option label="预约中" value="1"></el-option>
                <el-option label="预约成功" value="2"></el-option>
                <el-option label="预约失败" value="3"></el-option>
            </el-select>
            <el-select  v-model="query.yimiaoId" placeholder="请选择疫苗" style="margin-right: 20px;" clearable>
                <el-option :label="v.name" :value="v.id" v-for="v in ymList">
                    <span>{{v.type==1?'猫咪疫苗':'狗狗疫苗'}}</span>
                    <span style="margin: 0 10px;">{{v.name}}</span>
                    <span>{{v.price}}元</span>
                </el-option>
            </el-select>
            <!-- <el-date-picker style="margin-right: 20px;" v-model="query.time" value-format="YYYY-MM-DD" type="date" placeholder="请选择时间" :size="size" /> -->
            <el-button type="primary" @click="select">查询</el-button>
        </div>
        <div v-if="store.state.user.type == 1">
            <el-button type="primary" @click="add(null)">疫苗接种</el-button>
            <el-button type="danger" @click="handDelete" :disabled="!ids.length">批量删除</el-button>

        </div>
        <el-table border :data="list" style="width: 100%;margin-top: 20px;"  @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
          </el-table-column>
            <el-table-column prop="chongwuName" label="宠物姓名" />
          
            <el-table-column prop="chongwuType" label="宠物类型" >
                <template #default="scope">
                    {{scope.row.chongwuType==1?'猫咪':'狗狗'}}
                </template>
</el-table-column>
<el-table-column prop="price" label="疫苗价格" show-overflow-tooltip/>
<el-table-column prop="yimiaoName" label="疫苗名称" show-overflow-tooltip/>
<el-table-column prop="yimiaoType" label="疫苗类型">
    <template #default="scope">
        {{scope.row.yimiaoType==1?'猫咪疫苗':'狗狗疫苗'}}
    </template>
</el-table-column>
<el-table-column prop="img" label="疫苗图片">
    <template #default="scope">
        <img :src="scope.row.yimiaoImg" alt="" v-if="scope.row.yimiaoImg" style="width: 100px;height: 100px;">
        <span v-else>暂无图片</span>
     </template>
</el-table-column>
<el-table-column prop="userName" label="用户名" show-overflow-tooltip/>
<el-table-column prop="phone" label="手机号" show-overflow-tooltip/>
<el-table-column prop="beizhu" label="备注" show-overflow-tooltip/>
<el-table-column prop="phone" label="状态">
    <template #default="scope">
       
        <el-tag :type="scope.row.status==1?'info':scope.row.status==2?'success':'danger'">

            {{scope.row.status==1?'预约中':scope.row.status==2?'预约成功':'预约失败'}}
        </el-tag>
    </template>
</el-table-column>
<el-table-column prop="liyou" label="原因" show-overflow-tooltip/>
<el-table-column prop="time" label="时间" show-overflow-tooltip>
    <template #default="scope">
                  {{scope.row.time}}
                </template>
</el-table-column>

<el-table-column label="操作">
    <template #default="scope">
        <div v-if="store.state.user.type == 1 && scope.row.status==1">
 <!-- {{scope.row}} -->
 <el-button type="text" @click="add(scope.row)">修改</el-button>
 <el-button type="text" @click="handDelete(scope.row)">删除</el-button>
        </div>
        <div v-if="store.state.user.type == 2 && scope.row.status==1">
            <!-- {{scope.row}} -->
            <el-button type="text" @click="updateStatus(scope.row.id,2)">同意</el-button>
            <el-button type="text" @click="updateStatus(scope.row.id,3)">拒绝</el-button>
                   </div>
                </template>
</el-table-column>
<!-- <el-table-column prop="address" label="Address" /> -->
</el-table>
<el-pagination v-show="total>0" style="margin-top: 20px;" :currentPage="query.page" :page-sizes="[100, 200, 300, 400]" background layout="total,  prev, pager, next, jumper" :page-size="query.size" :total="total" @current-change="currentChange"></el-pagination>
<el-dialog destroy-on-close v-model="dialogVisible" :title="type=='add'?'疫苗接种':'疫苗接种'" width="30%" :before-close="handleClose">
    <el-dialog v-model="innerVisible" width="800" title="选择疫苗" append-to-body>
        <el-table :row-key="row => row.id" highlight-current-row @row-click="handleRowClick" border :data="ymList" style="width: 100%;margin-top: 20px;">

            <el-table-column prop="name" label="名称" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="desc" label="描述" show-overflow-tooltip/>
            <el-table-column prop="price" label="类型">
                <template #default="scope">
                    {{scope.row.type==1?'猫咪疫苗':'狗狗疫苗'}}
                </template>
            </el-table-column>
            <el-table-column prop="img" label="图片">
                <template #default="scope">
                    <img :src="scope.row.img" alt="" v-if="scope.row.img" style="width: 100px;height: 100px;">
                    <span v-else>暂无图片</span>
                 </template>
            </el-table-column>
            <el-table-column label="操作" v-if="store.state.user.type == 3">
                <template #default="scope">
                    <!-- {{scope.row}} -->
                    <el-button type="text" @click="add(scope.row)">修改</el-button>
                    <el-button type="text" @click="handDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="Address" /> -->
        </el-table>
        <template #footer>
            <span class="dialog-footer">
              <el-button @click="innerVisible = false">取消</el-button>
              <el-button type="primary" @click="submit2">
             确定
              </el-button>
            </span>
          </template>
    </el-dialog>
    <el-form :model="form" :rules="rules" ref="formRef" :inline="false" size="default">
        <el-form-item prop="chongwuId" style="width: 100%;">
            <el-select v-model="form.chongwuId" placeholder="请选择宠物" style="width: 100%;">
                <el-option :label="v.name" :value="v.id" v-for="v in cwList"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="yimiaoId" style="width: 100%;">
            <!-- <el-select v-model="form.yimiaoId" placeholder="请选择疫苗" style="width: 100%;" clearable>
                <el-option :label="v.name" :value="v.id" v-for="v in ymList">
                    <span>{{v.type==1?'猫咪疫苗':'狗狗疫苗'}}</span>
                    <span style="margin: 0 10px;">{{v.name}}</span>
                    <span>{{v.price}}元</span>
                </el-option>
            </el-select> -->
            <el-button type="primary" @click="selectYimiao" style="margin-right: 20px;">选择疫苗</el-button>
            <span>疫苗名称：</span> {{selectedRow.name}}
            <span style="margin-left: 20px;">疫苗价格：</span> {{selectedRow.price}}
        </el-form-item>

        <el-form-item prop="time">
            <el-date-picker style="width: 100%;" v-model="form.time" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择时间" :size="size" />
        </el-form-item>
        <el-form-item prop="beizhu" style="width: 100%;">
            <el-input v-model="form.beizhu" placeholder="请输入备注" style="width: 100%;" type="textarea" :rows="4">
            </el-input>
        </el-form-item>

    </el-form>
    <template #footer>
  <span class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="submit">
      {{type=='add'?'预约':'修改'}}
    </el-button>
  </span>
</template>
</el-dialog>
</div>
</template>
<script setup>
    import {
        onMounted,
        ref,
        reactive,
        nextTick
    } from 'vue'
    import {
        jiezhongList,
        chongwuList,
        deptAdd,
        yimiaoList,
        deptDelete,
        jiezhongdeletee,
        regjiezhong,
        jiezhongUpdate
    } from "~/api/xm.js"
    import {
        useStore
    } from 'vuex'
    import {
        ElMessage,
        ElMessageBox
    } from 'element-plus'
    import {
        Plus
    } from '@element-plus/icons-vue'
    const store = useStore()
    const ids = ref([])
    const cwList = ref([])
    const list = ref([])
    const total = ref(0)
    const type = ref('')
    const id = ref('')
    const dialogVisible = ref(false)
    const innerVisible = ref(false)

    function selectYimiao() {
        zancun.value = {}
        innerVisible.value = true
    }
    const query = ref({
        page: 1,
        size: 10,
        time: '',
        chongwuId: '',
        userId: store.state.user.type == 1 ? store.state.user.id : null
    })
    const form = reactive({
        time: "",
        chongwuId: '',
        tizhong: '',
        yinshi: '',
        huodong: '',
    })

    function handleAvatarSuccess(e) {
        form.img = e.data
        console.log(e);
    }
    const selectedRow = ref({})
    const zancun = ref({})

    function handleRowClick(row) {
        zancun.value = row;
        console.log(zancun.value);
    }

    function submit2() {
        if (!zancun.value.id) {
            return ElMessage({
                type: 'warning',
                message: `请选择疫苗`,
            })
        }
        selectedRow.value = zancun.value
        innerVisible.value = false
        form.yimiaoId = selectedRow.value.id
    }

    function updateStatus(id, status) {
        if (status == 3) {
            ElMessageBox.prompt('请输入拒绝理由', '提示', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    inputPattern: /^.+$/,
                    inputErrorMessage: '不能为空',
                })
                .then(({
                    value
                }) => {
                    jiezhongUpdate({
                        id,
                        status,
                        liyou: value
                    }).then(res => {
                        ElMessage({
                            type: 'success',
                            message: `拒绝成功`,
                        })
                        select()
                    })

                })

        } else {
            jiezhongUpdate({
                id,
                status
            }).then(res => {
                ElMessage({
                    type: 'success',
                    message: `同意成功`,
                })
                select()
            })
        }
    }

    function currentChange(e) {
        query.value.page = e
        select()
        console.log(e);
    }

    function handleSelectionChange(e) {

        ids.value = e.map(v => v.id)
        console.log(ids.value);
    }
    const rules = {
        chongwuId: [{
            required: true,
            message: '宠物不能为空',
            trigger: 'change',
        }],
        yimiaoId: [{
            required: true,
            message: '疫苗不能为空',
            trigger: 'change',
        }],

        time: [{
            required: true,
            message: '时间不能为空',
            trigger: 'change',
        }],

    }
    const ymList = ref(null)
    onMounted(() => {
        select()
        chongwuList({
            page: 1,
            size: 999,
            userId: store.state.user.type == 1 ? store.state.user.id : null
        }).then(res => {
            cwList.value = res.data.list
            console.log(2222222, res.data.list);
        })
        yimiaoList({
            page: 1,
            size: 999,
        }).then(res => {
            ymList.value = res.data.list
            console.log(res);
        })
    })

    function handDelete(row) {
        let id = row.id ? row.id : ids.value.join(',')
        console.log(id);
        ElMessageBox.confirm(
                `是否删除id为${id}的数据?`,
                'Warning', {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消删除',
                    type: 'warning',
                }
            )
            .then(() => {
                jiezhongdeletee(id).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: 'Delete completed',
                        })
                        select()
                    }
                })

            })

    }
    const formRef = ref(null)

    function add(e) {
        nextTick(() => {

            formRef.value.clearValidate()
        })
        form.id = ''
        form.userId = ''
        form.chongwuId = ''
        form.beizhu = ''
        form.time = ''
        form.yimiaoId = ''
        type.value = "add"
        dialogVisible.value = true
        selectedRow.value = {}
        if (e && e.id) {
            type.value = "edit"
            form.id = e.id
            form.beizhu = e.beizhu
            form.chongwuId = e.chongwuId
            form.time = e.time
            form.yimiaoId = e.yimiaoId
            selectedRow.value = ymList.value.find(v => v.id == e.yimiaoId)
            console.log(e.yimiaoId, selectedRow.value);
        }
    }

    function select() {
        jiezhongList(query.value).then(res => {
            total.value = res.data.total
            list.value = res.data.list
            console.log(res);
        })
    }

    const rowId = ref('')

    function submit() {
        formRef.value.validate((valid) => {
            if (valid) {
                form.userId = store.state.user.id
                if (type.value == "add") {
                    regjiezhong(form).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '新增成功',
                            })
                            dialogVisible.value = false
                            select()
                        }

                    })
                } else {
                    jiezhongUpdate(form).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '修改成功',
                            })
                            dialogVisible.value = false
                            select()
                        }
                    })
                }


            }
        })
    }
</script>
<style scoped>
    .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }
    
    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }
    
    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>